<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <div id="content"></div>
        <div id="message"></div>
        <div id="loading"></div>
    </div>

    <p>-------------</p>
    <script>
        const getUsers = async () => {
            const url = 'https://jsonplaceholder.typicode.com/users';
            // const url = 'https://jsonplaceholder.typicode.net/users';
            const response = await fetch(url);
            return await response.json();
        }
        const render = (users) => {
            const item = users.map(({ name, email }) => `<li>${name} - (${email})`).join('');
            return `<ul>${item}</ul>`;
        }

        (async () => {
            const loadingEle = document.querySelector('#loading');
            loadingEle.innerHTML = 'Loading...';

            const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
            await delay(2000);// delay 2 seconds

            try {
                const users = await getUsers();
                document.querySelector('#content').innerHTML = render(users);
            } catch (e) {
                document.querySelector('#message').innerHTML = e.message;
            } finally {
                loadingEle.innerHTML = '';
            }
        })();
    </script>
</body>

</html>